<html>
    <head>
        <title>Feature Editor Grid</title>

        <link rel="stylesheet" type="text/css" href="http://extjs.cachefly.net/ext-3.4.0/resources/css/ext-all.css" />
        <link rel="stylesheet" type="text/css" href="http://extjs.cachefly.net/ext-3.4.0/examples/shared/examples.css" />
        <script type="text/javascript" src="http://extjs.cachefly.net/ext-3.4.0/adapter/ext/ext-base.js"></script>
        <script type="text/javascript" src="http://extjs.cachefly.net/ext-3.4.0/ext-all-debug.js"></script>
        <script type="text/javascript" src="http://www.openlayers.org/api/2.11/OpenLayers.js"></script>
        <script type="text/javascript" src="../../../../geoext/lib/GeoExt.js"></script>
        <script type="text/javascript" src="../lib/GeoExt.ux/FeatureEditorGrid.js"></script>

        <script type="text/javascript" src="feature-editor-grid.js"></script>
        <style type="text/css">
            /* make the save button appear like a standard button (ie. like not a toolbar) */
            .x-save-btn { margin-left: 3px; }
            .x-save-btn .x-btn-tl { background-position: 0 0; }
            .x-save-btn .x-btn-tr { background-position: -3px 0; }
            .x-save-btn .x-btn-tc { background-position: 0 -6px; }
            .x-save-btn .x-btn-ml { background-position: 0 -24px; }
            .x-save-btn .x-btn-mr { background-position: -3px -24px; } 
            .x-save-btn .x-btn-mc { background-position: 0 -1096px; }
            .x-save-btn .x-btn-bl { background-position: 0 -3px; }
            .x-save-btn .x-btn-br { background-position: -3px -3px; }
            .x-save-btn .x-btn-bc { background-position: 0 -15px; }
        </style>

    </head>
    <body>
        <h1></h1>

        <p>When the Add feature button is clicked, you can click on the map to add a feature. When done, the feature attributes can be changed in the editing grid. Available values for symbol are for example "square", "star", "circle". The symbol on the map should reflect the changes in the editing grid.</p>

        <p>See <a href="feature-editor-grid.js">feature-editor-grid.js</a>.</p>

        <div id="panel"></div>
    </body>
</html>
